<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">服务状态</h2>
      <a href="#" class="text-primary text-sm hover:underline" @click.prevent="viewHealthReport">服务健康度报告</a>
    </div>
    <div class="p-4">
      <div class="grid grid-cols-2 gap-3">
        <div class="flex items-center p-3 border border-gray-100 rounded-lg" v-for="(service, index) in serviceStatuses" :key="index">
          <div class="w-3 h-3 rounded-full" :class="service.statusColorClass + ' mr-3'"></div>
          <div class="flex-1">
            <div class="text-sm">{{ service.name }}</div>
            <div class="text-xs text-gray-500 mt-0.5">{{ service.statusText }}</div>
          </div>
          <div class="text-xs text-gray-500">
            {{ service.responseTime }}ms
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      serviceStatuses: [
        {
          name: '云服务器',
          statusText: '运行正常',
          statusColorClass: 'bg-success',
          responseTime: 23
        },
        {
          name: '对象存储',
          statusText: '运行正常',
          statusColorClass: 'bg-success',
          responseTime: 45
        },
        {
          name: '数据库服务',
          statusText: '性能下降',
          statusColorClass: 'bg-warning',
          responseTime: 186
        },
        {
          name: 'CDN加速',
          statusText: '部分节点异常',
          statusColorClass: 'bg-warning',
          responseTime: 78
        },
        {
          name: '负载均衡',
          statusText: '运行正常',
          statusColorClass: 'bg-success',
          responseTime: 15
        },
        {
          name: '安全防护',
          statusText: '运行正常',
          statusColorClass: 'bg-success',
          responseTime: 32
        },
        {
          name: '监控系统',
          statusText: '维护中',
          statusColorClass: 'bg-info',
          responseTime: 65
        },
        {
          name: 'API网关',
          statusText: '运行正常',
          statusColorClass: 'bg-success',
          responseTime: 28
        }
      ]
    };
  },
  methods: {
    viewHealthReport() {
      // 查看服务健康度报告逻辑
      console.log('查看服务健康度报告');
    }
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.bg-success {
  background-color: #10b981;
}
.bg-warning {
  background-color: #f59e0b;
}
.bg-info {
  background-color: #06b6d4;
}
.text-gray-500 {
  color: #6b7280;
}
.text-primary {
  color: #3b82f6;
}
.hover\:underline:hover {
  text-decoration: underline;
}
</style>